const useState = React.useState;
const useEffect = React.useEffect;
const { HashRouter, Route, Link } = ReactRouterDOM;
// import Button from './button';


function deepCopy(val) {
    const toString = Object.prototype.toString;
    if (toString.call(val) === "[object Array]") {
        return val.map(item => deepCopy(item));
    }
    if (toString.call(val) === "[object Object]") {
        let obj = {};
        for (let key in val) {
            obj[key] = deepCopy(val[key]);
        }
        return obj;
    }
    return val;
}

function Jo() {
    return (<div>
        <div>我是jo</div>
    </div>)
}

function Yo() {
    return (<div>
        我是哈哈
    </div>)
}
const router = [
    {
        path: '/io',
        component: Yo
    },
    {
        path: '/oo',
        component: Jo
    }
];
function Ha() {
    return (<div>
        <HashRouter>
            {
                router.map(item => {
                    return (<Link key={item.path} to={item.path}>{item.path}路径</Link>);
                })
            }
            {/* <Link to="/oo">oo</Link> |  <Link to="/">回到首页</Link> */}
            {/* 
            <Route path="/" component={Yo}></Route>
            <Route path="/oo" component={Jo}></Route> */}
            {
                router.map((item) => {
                    return (
                        <Route key={item.path} path={item.path} component={item.component}></Route>
                    );
                })
            }
        </HashRouter>

    </div>)
}
function Hello() {
    // useState方法返回一个数组，数组的第一个元素就是这个state对象的值，第二个是设置值的方法
    const [msg, setMsg] = useState('这里便是state的数据');

    const [dataArr, setDataArr] = useState([]);

    useEffect(() => {

        const arrData = [
            { num: 2, warning: false },
            { num: 2, warning: false },
            { num: 3, warning: false },
            { num: 1, warning: false },
            { num: 4, warning: false },
            { num: 4, warning: false },
            { num: 5, warning: false },
            { num: 5, warning: false },
            { num: 5, warning: false },
            { num: 5, warning: false },
            { num: 5, warning: false },
            { num: 7, warning: false },
            { num: 5, warning: false },
            { num: 5, warning: false },
            { num: 8, warning: false },
            { num: 5, warning: false },
        ];

        let tempArr = [];
        const result = deepCopy(arrData).map(item => {
            item = { ...item };
            // 不重复不警告
            if (!tempArr.includes(item.num)) {
                tempArr.push(item.num);
                item.warning = false;
            } else {
                // 重复的警告
                item.warning = true;
            }
            return item;
        });
        setDataArr(result);
    }, []);


    let inputVal = '';
    console.log('秀');
    function changeMsg() {
        console.log(inputVal);
        setMsg(inputVal);
    }
    function inputEvent(e) {
        inputVal = e.target.value;
    }
    return (
        <React.Fragment>
            <div>
                我们一起学习react吧！
                <div>
                    <input type="text" onInput={inputEvent} />
                    <button onClick={changeMsg}>修改state</button>
                    <div>
                        {msg}
                    </div>
                </div>
                <ul>
                    {dataArr.map((item, index) => (
                        <li key={index} className={item.warning ? 'warning' : ''}>
                            {item.num}
                            {item.warning && <span> * 注意，这是一个重复项</span>}
                        </li>
                    ))}
                </ul>
            </div>

            <ViewButtonController></ViewButtonController>

            <Ha></Ha>
        </React.Fragment >
    );
}
ReactDOM.render(<Hello></Hello>, document.getElementById('app'));
